<template>
	<view class="weui-tabbar" :class="extClass">
		<!-- 选中的时候往weui-tabbar__item加class:weui-bar__item_on -->
		<view @click="tabChange(index,item.url)" v-for="(item, index) in list" :key="index" class="weui-tabbar__item"
			:class="{'weui-bar__item_on':index === current}">
			<view style="position: relative;display:inline-block; align-content: center;" class="imageT">
				<image :src="current === index ? item.selectedIconPath : item.iconPath" class="image"
					:class="item.text=='main'? 'weui-tabbar__icon_main' : 'weui-tabbar__icon'">
				</image>
			</view>
			<view v-if="item.text!='main'" class="weui-tabbar__label">{{ item.text }}</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ['indexNum'],
		data() {
			return {
				extClass: '',
				current: this.indexNum,
				list: [{
					"text": "任务",
					"iconPath": '/static/tab-bar/renwu-no.png',
					"selectedIconPath": '/static/tab-bar/renwu.png',
					"url": '/pages/my-job/boss-my-job-new'
				}, {
					"text": "main",
					"iconPath": '/static/tab-bar/fabuhui.png',
					"selectedIconPath": '/static/tab-bar/fabu.png',
					"url": '/pages/app-employer/send-job/send-job-new'
				}, {
					"text": "我的",
					"iconPath": '/static/tab-bar/me-no.png',
					"selectedIconPath": '/static/tab-bar/me.png',
					"url": '/pages/my/newMy'
				}],
			};
		},
		methods: {
			tabChange(index, url) {
				if (index === this.current) {
					return;
				}
				// setTimeout(()=>{},100)
				uni.reLaunch({
					url: url,
					//animationType: 'none',
					animationType: 'fade-in',
					//animationType: 'zoom-fade-out',
					animationDuration: 1000
				})
				this.current = index;
			}
		},
	};
</script>
<style lang="scss" scoped>
	.weui-tabbar {
		display: flex;
		position: relative;
		z-index: 500;
		background-color: #ffffff;
		height: 166rpx;
	}

	.weui-tabbar:before {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1rpx;
		color: rgba(0, 0, 0, 0.1);
	}

	.weui-tabbar__item {
		//display: block;
		justify-content: center;
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 8rpx 0 4rpx;
		padding-bottom: calc(8rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(8rpx + env(safe-area-inset-bottom));
		font-size: 0;
		color: rgba(0, 0, 0, 0.5);
		text-align: center;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.weui-tabbar__item:first-child {
		padding-left: constant(safe-area-inset-left);
		padding-left: env(safe-area-inset-left);
	}

	.weui-tabbar__item:nth-child(2) {
		.imageT {
			height: 100%;

			.image {
				margin-top: 28rpx;
			}
		}
	}

	.weui-tabbar__item:last-child {
		padding-right: constant(safe-area-inset-right);
		padding-right: env(safe-area-inset-right);
	}

	// .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
	// .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,
	// .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
	// 	color: #57524E;
	// }
	.weui-tabbar__icon {
		display: inline-block;
		width: 34rpx;
		height: 38rpx;
		margin-bottom: 2rpx;
	}

	.weui-tabbar__icon_main {
		display: inline-block;
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 2rpx;
	}

	i.weui-tabbar__icon,
	.weui-tabbar__icon>i {
		font-size: 22rpx;
		color: rgba(0, 0, 0, 0.5);
	}

	.weui-tabbar__icon image {
		width: 100%;
		height: 100%;
	}

	.weui-tabbar__label {
		color: #5C5855;
		font-size: 24rpx;
		line-height: 1.4;
	}
</style>
